<template>
    <div class="flex">
        <!-- 应用列表 -->
        <div class="bg-white flex flex-col p-4 rounded-md w-[400px] h-[188px]" v-for="app in apps" :key="app.id">
            <div class="flex justify-between items-center">
                <div class="flex justify-center">
                    <a-image class="w-14 h-14" :src="app.icon" />
                    <div class="flex flex-col justify-between ml-3">
                        <span class="text-lg font-bold">{{ app.name }}</span>
                        <span class="text-sm text-gray-500">{{ app.modelName }}</span>
                    </div>
                </div>
                <a-dropdown position="br">
                    <a-button class="rounded-md">···</a-button>
                    <template #content>
                        <a-doption @click="onDebugApp(app)">调试</a-doption>
                        <a-doption disabled>创建副本</a-doption>
                        <a-doption class="text-red-500" disabled>删除</a-doption>
                    </template>
                </a-dropdown>
            </div>
            <div class="text-sm mt-3 text-gray-500 h-full">{{ app.description }}</div>
            <div class="text-gray-400 flex items-center mt-4">
                <a-avatar :style="{ backgroundColor: '#1d4ed8' }" :size="16">知</a-avatar>
                <span class="ml-1">知多少 · 最新编辑</span>
                <span class="ml-1">{{ app.publishTime }}</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router'

const apps = ref([
    {
        id: '7cc0c69d-7613-4d03-a3f9-6ad03db51e15',
        name: '测试应用',
        modelName: 'chat-gpt-4-turbo-16k',
        icon: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp',
        description: '基于 OpenAI chatGPT 大模型开发的测试型应用',
        createTime: '2024-09-02 17:29:00',
        publishTime: '2024-09-02 18:00:00'
    }
])

/**
 * 调试应用
 * 
 * @param param 参数
 */
const onDebugApp = (param: any) => {
    router.push(`/space/app/${param.id}`)
}
</script>

<style scoped></style>